<template>
  <div class="footer-container container" :style="{width:zfooterWidth}">
    <div class="footer-top">
      <div class="topli top-left">
        <div class="logo-img">
          <el-image :src="logoImg.url"></el-image>
        </div>
        <div class="text">
          <div class="span span-1">加入创作者生态</div>
          <div class="span span-2">若您和您的团队想发行推⼴数字藏品，请联系</div>
          <div class="span span-3">ip@zerotmeat@zt.com</div>
        </div>
      </div>
      <div class="topli top-right">
        <div class="li">联系我们</div>
        <div class="li">关于我们</div>
        <div class="li">商务合作</div>
        <div class="li">用户协议</div>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="span span-1">浙ICP备2021024600号 | 增值电信业务经营许可证（EDI）：浙B2-20210658 | 拍卖经营批准证：浙杭3300631100002022 | 浙网信备</div>
      <div class="span span-2">33011021539843750010号 | 杭余艺术品备（2021）1号｜ 浙公网安备 33011002016487号</div>
      <div class="span span-3">© 2018-2022 TheOne.Art 版权所有</div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'Footer',
  props:{
    zfooterWidth:{
      typeof:'string',
      default:'100'+'%'
    }
  },
  data() {
    return {
      logoImg: { url: require('@/image/logo.png') }
    }
  }
}

</script>
<style  lang="less" scoped>
* {
  margin: 0%;
  padding: 0%;
}

.footer-container {
  // width: 100%;
  max-width: 900px;
  // background: pink;

  .footer-top {
    position: relative;
    width: 100%;
    display: flex;

    .topli {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .top-left {
      .el-image {
        width: 200px
      }

      .text {
        position: relative;
        padding-bottom: 10px;
        box-sizing: border-box;
        .span {
          text-align: left;
          padding: 5px 5px 0 20px;
          box-sizing: border-box;
          font-size: 12px;
        }

        .span-1 {
          font-size: 18px;
          font-weight: 700;
        }

        .span-3 {
          cursor: pointer;
        }
      }
      .text::after{
        position: absolute;
        left: 20px;
        bottom: -10%;
        content: "";
        width: 90%;
        height: 1px;
        background: gray;
      }
    }

    .top-right {
      padding: 20px 5px 0 20px;
      box-sizing: border-box;

      .li {
        cursor: pointer;
        color: black;
        font-size: 8px;
      }

      .li:hover {
        color: gray;
      }
    }

  }
  .footer-bottom{
    margin-top: 20px;
    width: 100%;

    .span{
      font-size: 8px;
      text-align: left;
      padding: 5px 0 5px 20px;
      box-sizing: border-box;
    }
  }
}
</style>